<template>
  <div id="app">
    <mt-header title="笑脸地图">
      <a slot="left" href="javascript:history.back(-1)">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
      <div class="seachfrom">
        <form data-formposition="i" class="se-form" id="index-form" action="/from=844b/s" method="get" autocomplete="off">
          <div class="con-wrap">
            <input type="search" v-model="seachtext" placeholder="请输入你要查找的企业" class="se-input adjust-input">
            <div class="se-inner"><button id="index-bn" class="se-bn" type="button" @click="seach()">搜索</button>
            </div>
          </div>
        </form>
      </div>
      <div id="container" style="width:100%; height:250px"></div>
      <div class="enterprise">
        <li v-for="item in this.listData">
          <a>
            <p>
              <img src="../../../static/img/green.png">{{item.name}}
            </p>
            <p>
              地址:{{item.address}}
              <br> 电话:{{item.contactPhone}}
            </p>
          </a>
        </li>
      </div>
  
  
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
  var map;
  var myGer;
  var infoWindow;
  var currentPosition
  var enterprise
  var geolocation
  var editor = {}
  var baiduPointarr=[]
  var MapCity = "0951";
  var MapName = "茌平县";
  import {
    Header,
    Button
  } from 'mint-ui';
  import {
    EnterpriseCPData
  } from '../../api/api';
  export default {
    data() {
      return {
        imageUrl: '../../static/img/green.png',
        seachtext: '',
        listData: [],
        baiduPointarr:[], 
        geolocation: '',
        circle: '',
        editor: {},
        currentPosition: "",
      };
    },
    components: {
      "mt-button": Button,
      "mt-header": Header,
    },
    created() {
  
    },
    mounted: function() {
      this.init();
  
    },
    methods: {
      init: function() {
        /***************************************************@author初始化*********************************************/
        map = new AMap.Map('container', {
          center: [106.26667, 38.46667],
          resizeEnable: true,
          zoom: 10
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], function() {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
          geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 1000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        })
      this.LoadMapData()
        function onComplete(data) {
        
          var str = [];
          str.push(data.position.getLng());
          str.push(data.position.getLat());
          currentPosition = str.join(',');
          //定位圆心位置
          editor._circle = (function() {
            var circle = new AMap.Circle({
              center: [data.position.getLng(), data.position.getLat()], // 圆心位置
              radius: 2000, //半径
              strokeColor: "#F33", //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 3, //线粗细度
              fillColor: "#ee2200", //填充颜色
              fillOpacity: 1 //填充透明度
            });
          
            for (var j = 0, map; j <baiduPointarr.length; j++) {
              var myObj =baiduPointarr[j];
              var myLngLat = new AMap.LngLat(myObj.x, myObj.y);
              console.log(circle.contains(myLngLat));
              if (circle.contains(myLngLat)) { //如果点在圆内则输出
                var marker = new AMap.Marker({
                  position: myLngLat,
                  map: map
                });
              }
  
            }
            circle.setMap(map);
            return circle;
          })();
          map.setFitView();
        }
      },
      LoadMapData: function() {
        debugger
        let options = {
          params: {
            whereValue: '',
            industryType: '',
            scoreLevel: '优秀', //默认A级
          }
        }
        //调取接口
        EnterpriseCPData(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.ShowData(res.data)
          }
        })
  
      },
      ShowData: function(data) {
        map.clearMap()
        if (data != null && data.length != 0) {
          for (var i in data) {
            if (data[i].baiduPoint != null) {
              this.AddMarketNew(data[i]);
              baiduPointarr.push({'x':data[i].baiduPoint.split(',')[0],'y':data[i].baiduPoint.split(',')[1]});
              console.log(baiduPointarr)
            }
          }
        }
      },
      AddMarketNew: function(item) {
        var imageUrl = this.imageUrl;
        var markerIcon = new AMap.Marker({
          map: map,
          position: [item.baiduPoint.split(',')[0], item.baiduPoint.split(',')[1]],
          title: (item.name + "-" + item.code),
          icon: new AMap.Icon({
            size: new AMap.Size(40, 50), //图标大小
            image: imageUrl,
            imageOffset: new AMap.Pixel(0, 0)
          })
        });
        //查询数据
        var infoWindow = new AMap.InfoWindow();
        markerIcon.content = '<div class="mapcontent">' +
          '<h4>' + item.name + '</h4>' +
          '<p>' + '电话' + item.contactPhone + '</p>' +
          '<p>' + '地址' + item.address + '</p>' +
          '<p>' +
          '<a class="pull-left"  href="tel:\'' + item.contactPhone + '\'">' + '一键拨号' + '</a>' +
          '<a class="pull-right" onclick="ViewCheckData(\'' + item.baiduPoint + '\',\'' + item.address + '\',\'' + this.currentPosition + '\')">' + '一键导航' + '</a>' +
          '</p>' +
          '</div>';
        markerIcon.on('click', markerClick);
        function markerClick(e) {
          infoWindow.setContent(e.target.content);
          infoWindow.open(map, e.target.getPosition());
        }
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .amap-info-content {
    padding: 12px 18px 10px 12px;
  }
  
  .amap-info-content .mapcontent {
    p {
      color: #9a9999;
      a {
        color: #fff;
        background: #FF6A2A;
        font-size: 0.9rem;
        padding: 6px 10px;
        border-radius: 5px;
      }
    }
  }
  
  .map {
    width: 100%;
    height: 250px;
  }
  
  .enterprise {
    li {
      border-bottom: 1px solid #e7e7e7;
      a {
        padding: 10px 0 10px 10px;
        overflow: hidden;
        display: block;
        p {
          margin: 0;
          img {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 0.65rem;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
  
  .enterprise li p:first-child {
    margin-bottom: 5px;
    color: #333333;
    font-size: .95rem;
  }
  
  .enterprise li p:last-child {
    color: #868686;
  }
  
  
  /*搜索*/
  
  #index-form {
    margin: 0
  }
  
  .seachfrom {
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7;
  }
  
  #index-form {
    margin: 0 16px;
    height: 35px;
    background: #fff;
    border: 1px solid #d2d2d2;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  
  #index-form .con-wrap {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
  }
  
  .se-input {
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 0;
    padding: 7px 42px 7px 6px;
    height: 35px;
    line-height: 28px;
    resize: none;
    overflow: hidden;
    border: 0;
    box-sizing: border-box
  }
  
  .se-input,
  .se-encode {
    -webkit-appearance: none;
    display: block;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    font-size: .9rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .adjust-input {
    position: relative;
    word-break: break-all;
    word-wrap: break-word;
    box-sizing: border-box;
    // background: url(../img/seach.png) no-repeat;
    background-position: 8px;
    text-align: left;
  }
  
  .se-inner {
    width: 82px;
    position: relative;
  }
  
  #index-bn {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 60px;
    height: 35px;
    background: #21aeff;
    color: #fff;
    white-space: nowrap;
    line-height: 35px;
    letter-spacing: -1px;
    font-size: .95rem;
    box-sizing: inherit;
    border: rgba(255, 0, 0, 0);
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
    text-shadow: none;
  }
</style>
